<template>
    <el-container>
        <el-header>组件</el-header>
        <!-- btn -->
        <el-container>
            <el-aside width='100px'>table</el-aside>
            <el-main>  
                <el-table 
                    :data = "tbData" 
                    :row-class-name="showFn" 
                    border  
                    height="300"

                    style="width:100%" 
                 >
                    <el-table-column
                        fixed
                        type="index" 
                    ></el-table-column>
                    <el-table-column 
                        prop="date"
                        fixed
                        label="日期"
                        width="150"
                    ></el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"

                    ></el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"
                        width="250"
                    ></el-table-column> 

                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="150">
                        <template slot-scope="b">
                            <el-button @click="dealFn(b.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                            <el-button
                                @click.native.prevent="delRow(tbData,b.$index)"
                                type="text"  
                                size="small">
                                移除  
                            </el-button>
                        </template>
                       
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
         
        
        <el-footer>
            底部
        </el-footer>
    </el-container>
</template>
<script>
    export default{
        
        data(){
            return{
               tbData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
        
            }
        },
        methods:{
            showFn({row,rowIndex}){
                if(rowIndex==1){
                    return "imp-row"
                } 
                 return '' 
            },
            dealFn(row) {
                console.log(row);
            },
            delRow(data,index){
                data.splice(index, 1);
            }
        },
    }
</script>
 <style>
  .el-table .imp-row{
     background: pink
 }
 </style>
 